/**
 * 封装全局弹出框
 * @param  {[String]} content [html字符串(必选选)]
 * @param  {[Array]} area [宽高(可选)]
 * @param  {[type]} type [弹窗类型(可选)]
 * @param  {[type]} success [确定按钮的回调] btn-confrim
 */

jQuery.preview = function(options){
	let self = this;
	let curIndex = 0;
	if($(".dialog-box")){ $(".dialog-box").remove() }


	if(!options.imgList){
		console.error( 'Dialog error:', '缺少图片数据' );
	}

		this.dialog = document.createElement("div");
		this.dialog.className = "dialog-box";

	let dialogWrapper = document.createElement("div");	
		dialogWrapper.className = "dialog-wrapper";

	let dialogContainer = document.createElement("div");	
		dialogContainer.className = "dialog-container slide-in-top";


	let closebtn = document.createElement("span");
		closebtn.className = "icon-close";
		dialogContainer.appendChild(closebtn);
	//是否传入了宽高
	if(options.area && options.area.length==2){
		dialogContainer.style.width = options.area[0] + "px";
		dialogContainer.style.height = options.area[1] + "px";
	}

		dialogWrapper.appendChild(dialogContainer);
		this.dialog.appendChild(dialogWrapper);

	let mianBox = document.createElement("div");	
		mianBox.className = "dailog-box";
	let prevBtn = document.createElement("div");	
		prevBtn.className = "prev-btn";

	let vehicleHeader = document.createElement("div");	
		vehicleHeader.className = "flex flex-sb vehicle-header";
	let vehicleName = document.createElement("span");	
		vehicleName.className = "vehicle-name";
		vehicleName.innerHTML = options.title || "";

		
	let rightBox = document.createElement("span");	
	let state = document.createElement("span");	
		state.className = options.stateClass?"state "+options.stateClass:"state";
		state.innerHTML = options.state || "";
		state.className = "mgr-20 time";
	let time = document.createElement("span");	
		time.className = "time";
		time.innerHTML = options.time || "";

	rightBox.appendChild(state)
	rightBox.appendChild(time)
	vehicleHeader.appendChild(vehicleName)
	vehicleHeader.appendChild(rightBox)

	let imgList = document.createElement("div");
		imgList.className = "img-list";	
	let nextBtn = document.createElement("div");	
		nextBtn.className = "next-btn";

		if(options.imgList.length>0){
			nextBtn.style.display = "inline";
		}

	let ul = document.createElement("ul");	

	options.imgList.forEach((item)=>{
		let li = document.createElement("li");	
		let img = document.createElement("img");	
			img.src = item.url;
		li.appendChild(img);
		ul.appendChild(li);
	})
	imgList.appendChild(ul);
	mianBox.appendChild(prevBtn);
	mianBox.appendChild(vehicleHeader);
	mianBox.appendChild(imgList);
	mianBox.appendChild(nextBtn);
	dialogContainer.appendChild(mianBox);

	prevBtn.onclick = function(e){
		curIndex = curIndex - 1;
		prevBtn.style.display = "inline";
		ul.style.transform = "translateX(-"+(self.ulWidth*curIndex)+"px)";
		nextBtn.style.display = "inline";
		if(curIndex==0){
			prevBtn.style.display = "none";
		}
	}

	nextBtn.onclick = function(e){
		curIndex = curIndex + 1;
		nextBtn.style.display = "inline";
		ul.style.transform = "translateX(-"+(self.ulWidth*curIndex)+"px)";
		if(curIndex==options.imgList.length-1){
			nextBtn.style.display = "none";
		}
		prevBtn.style.display = "inline";
	}

	dialogWrapper.onclick = function(e){
		self.dialog.remove();
	}

	closebtn.onclick = function(){
		self.dialog.remove();
	}

	dialogContainer.onclick = function(e){
		e.stopPropagation();
	}

	$(options.el?options.el:"body").append(this.dialog);
	
	this.ulWidth = ul.offsetWidth;
	ul.style.width = this.ulWidth*options.imgList.length + "px";

	this.close = function(){
		self.dialog.remove();
	}

	
}















